"use client"
import { TabBar } from 'antd-mobile'
import Bill from 'public/icons/layout/bill.svg'
import Edit from 'public/icons/layout/edit.svg'
import Chart from 'public/icons/layout/chart.svg'
import User from 'public/icons/layout/user.svg'
import { useState } from 'react'
import { useRouter, usePathname } from 'next/navigation'

export default function HomeLayout({children}){
  const tabs = [
    {
      key: 'bill', title: '账单', pathName:'/home/billPage',
      icon: <Bill width={24} height={24} fill="currentColor"/>,
    },
    {
      key: 'edit', title: '记账', pathName:'/home/editPage',
      icon: <Edit width={24} height={24} fill="currentColor"/>,
    },
    {
      key: 'chart', title: '图表', pathName:'/home/chartPage',
      icon: <Chart width={24} height={24} fill="currentColor"/>,
    },
    {
      key: 'user', title: '用户', pathName:'/home/userPage',
      icon: <User width={24} height={24} fill="currentColor"/>,
    }
  ]

  const pathname = usePathname()
  const curTab = tabs.find(item => item.pathName === pathname)
  const curTabKey = curTab ? curTab.key : 'bill'
  const [activeKey, setActiveKey] = useState(curTabKey)

  const router = useRouter()
  const handleTabChange = (key) => {
    const tab = tabs.find(item => item.key === key)
    if(tab.pathName === pathname) return
    setActiveKey(key)
    router.push(tab.pathName)
  }
  return(
    <div className="h-screen bg-white flex flex-col">
      <header className="h-[88px] pt-10 pr-4 pb-3 pl-4
        bg-gradient-to-b from-[var(--welcome-bg-start)] to-[var(--welcome-bg-end)]">
       <div className="text-white text-xl text-center"> <h3>蓝莓记账</h3> </div>
      </header>
      <main className="grow h-[100px]">
        {children}
      </main>
      <footer>
        <TabBar onChange={handleTabChange} activeKey={activeKey}>
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
      </footer>
    </div>
  )
}